<template>
	<view class="contacttheproperty">
		<view class="content">
			<view class="item">
				<view class="title">
					<view class="left">

					</view>
					<view class="right">
						<view class="">
							南航碧桂园小区物业服务中心
						</view>
						<view class="names">
							18栋3单元1楼
						</view>
					</view>
				</view>
				<view class="item-content">
					<text class="name">值班电话</text>
					<text class="phone">020-8130000</text>
					<image src="../../../../static/icons/电话.png" mode=""
						style="width: 60rpx;height: 60rpx;vertical-align: middle;"></image>
				</view>
				<view class="item-content">
					<text class="name">值班电话</text>
					<text class="phone">020-8130000</text>
					<image src="../../../../static/icons/电话.png" mode=""
						style="width: 60rpx;height: 60rpx;vertical-align: middle;"></image>
				</view>
			</view>
			<view class="item">
				<view class="title">
					<view class="left">
					</view>
					<view class="right">
						<view class="">
							南航碧桂园小区物业服务中心
						</view>
						<view class="names">
							18栋3单元1楼
						</view>
					</view>
				</view>
				<view class="item-content">
					<text class="name">值班电话</text>
					<text class="phone">020-8130000</text>
					<image src="../../../../static/icons/电话.png" mode=""
						style="width: 60rpx;height: 60rpx;vertical-align: middle;"></image>
				</view>
				<view class="item-content">
					<text class="name">值班电话</text>
					<text class="phone">020-8130000</text>
					<image src="../../../../static/icons/电话.png" mode=""
						style="width: 60rpx;height: 60rpx;vertical-align: middle;"></image>
				</view>
			</view>
		</view>
		<button class="Btn" @click="gokefu">在线客服</button>
	</view>
</template>

<script setup>
	const gokefu = () => {
		uni.navigateTo({
			url: "/pages/server/views/OnlineCustomerservice/OnlineCustomerservice"
		})
	}
</script>

<style lang="scss">
	.contacttheproperty {
		height: 100vh;
		padding: 30rpx;
		background-color: #fcfcfd;

		.Btn {
			margin-top: 80rpx;
			font-size: 30rpx;
			background-color: #006eff;
			color: white;
		}

		.content {
			.item {
				padding: 30rpx;
				background-color: white;
				border: 2rpx solid #f2f2f2;
				margin-bottom: 30rpx;

				.item-content:last-child {
					margin: 0rpx;
					border: none;
					padding: 0;
				}

				.item-content {
					font-size: 28rpx;
					border-bottom: 2rpx solid #f2f2f2;
					padding-bottom: 30rpx;
					margin-bottom: 30rpx;

					.name {
						color: #aaa;
						margin-right: 20rpx;
					}

					.phone {
						margin-right: 20rpx;
					}
				}



				.title {
					display: flex;
					border-bottom: 2rpx solid #f2f2f2;
					padding-bottom: 30rpx;
					margin-bottom: 30rpx;

					.left {
						width: 128rpx;
						height: 128rpx;
						border-radius: 16rpx;
						background-color: #e6f1ff;
						margin-right: 20rpx;
					}

					.right {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.names {
							font-size: 26rpx;
							color: #9a9a9a;
						}
					}
				}
			}
		}
	}
</style>